<template>
  <div id="SyncChannelProgress" v-loading="isLoging">
    <el-dialog
        width="240px"
        :top="dialogTop"
        :append-to-body="true"
        :close-on-click-modal="false"
        v-model="showDialog"
        :destroy-on-close="true"
        :show-close="true"
        @close="close()"
        style="text-align: center">
      <el-progress type="circle" :percentage="percentage" :status="syncStatus"></el-progress>
      <div style="text-align: center">
        {{ msg }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSyncStatus} from "@/api/iot/gb";

export default {
  name: "SyncChannelProgress",
  props: ['platformId'],
  data() {
    return {
      dialogTop: '53%',
      endCallBack: null,
      syncStatus: null,
      percentage: 0,
      total: 0,
      current: 0,
      showDialog: false,
      isLoging: false,
      syncFlag: false,
      deviceId: null,
      timmer: null,
      msg: "正在同步",
    };
  },
  methods: {
    openDialog: function (deviceId, endCallBack) {
      // console.log("deviceId: " + deviceId);
      this.deviceId = deviceId;
      this.showDialog = true;
      this.msg = "";
      this.percentage = 0;
      this.total = 0;
      this.current = 0;
      this.syncFlag = false;
      this.syncStatus = null;
      this.endCallBack = endCallBack;
      this.getProgress();
    },
    getProgress() {
      getSyncStatus({deviceId: this.deviceId}).then((res) => {
        if (res && res.data) {
          // console.log("API Response:", res.data); // 打印 API 返回的数据
          if (res.data.syncIng) {
            if (res.data.total === 0) {
              this.msg = `等待同步中`;
              this.timmer = setTimeout(this.getProgress, 300);
            } else {
              this.syncFlag = true;
              this.total = res.data.total;
              this.current = res.data.current;
              this.percentage = Math.floor(Number(res.data.current) / Number(res.data.total) * 10000) / 100;
              this.msg = `同步中...[${res.data.current}/${res.data.total}]`;
              this.timmer = setTimeout(this.getProgress, 300);
            }
          } else {
            if (res.data.errorMsg) {
              this.msg = res.data.errorMsg;
              this.syncStatus = "exception";
            } else {
              this.syncStatus = "success";
              this.percentage = 100;
              this.msg = '同步成功';
              setTimeout(() => {
                this.showDialog = false;
              }, 3000);
            }
          }
        } else {
          console.error("API Response is invalid:", res);
          if (this.syncFlag) {
            this.syncStatus = "success";
            this.percentage = 100;
            this.msg = '同步成功';
          } else {
            this.syncStatus = "error";
            this.msg = res?.data?.msg || "未知错误";
          }
        }
      }).catch((error) => {
        console.error("API Error:", error);
        this.syncStatus = "error";
        this.msg = "error";
      });
    },
    close: function () {
      if (this.endCallBack) {
        this.endCallBack();
      }
      if (this.timmer) {
        window.clearTimeout(this.timmer);
        this.timmer = null;
      }
    }
  },
};
</script>

<style scoped>
/* 自定义样式 */
</style>